<template>
  <div style="width: 100%">
    <Modal
      v-model="modals"
      scrollable
      footer-hide
      closable
      title="仓租详情"
      :mask-closable="false"
      @on-cancel="cancel"
      width="950"
    >
      <table class="price-table">
        <thead>
          <tr>
            <th>总金额</th>
            <th>${{the_total.one_field}}</th>
            <th>${{the_total.two_field}}</th>
            <th>${{the_total.three_field}}</th>
            <th>${{the_total.four_field}}</th>
            <th>${{the_total.five_field}}</th>
          </tr>
          <tr>
            <th>类型</th>
            <th>0-30天</th>
            <th>31-90天</th>
            <th>91-270天</th>
            <th>271-390天</th>
            <th>大于390天</th>
          </tr>
        </thead>
        <tbody v-if="warehouse_type == 1">
          <tr>
            <td>
              <Tag color="cyan">普通产品</Tag>
            </td>
            <td>每天 $0/m³</td>
            <td>每天 $0.45/m³</td>
            <td>每天 $0.6/m³</td>
            <td>每天 $1.0/m³</td>
            <td>每天 $1.5/m³</td>
          </tr>
          <tr>
            <td>
              <Tag color="cyan">普通产品</Tag>
            </td>
            <td>{{ ordinary.one_field }}m³</td>
            <td>{{ ordinary.two_field }}m³</td>
            <td>{{ ordinary.three_field }}m³</td>
            <td>{{ ordinary.four_field }}m³</td>
            <td>{{ ordinary.five_field }}m³</td>
          </tr>
          <tr>
            <td>
              <Tag color="red">特殊尺寸</Tag>
            </td>
            <td>每天 $0/m³</td>
            <td>每天 $0.59/m³</td>
            <td>每天 $0.78/m³</td>
            <td>每天 $1.3/m³</td>
            <td>每天 $1.95/m³</td>
          </tr>
          <tr>
            <td></td>
            <td>{{ special.one_field }}m³</td>
            <td>{{ special.two_field }}m³</td>
            <td>{{ special.three_field }}m³</td>
            <td>{{ special.four_field }}m³</td>
            <td>{{ special.five_field }}m³</td>
          </tr>
        </tbody>
        <tbody v-else>
        <tr>
          <td>
            <Tag color="cyan">普通产品</Tag>
          </td>
          <td>每天 $0.3/m³</td>
          <td>每天 $0.3/m³</td>
          <td>每天 $0.45/m³</td>
          <td>每天 $1.0/m³</td>
          <td>每天 $1.5/m³</td>
        </tr>
        <tr>
          <td></td>
          <td>{{ ordinary.one_field }}m³</td>
          <td>{{ ordinary.two_field }}m³</td>
          <td>{{ ordinary.three_field }}m³</td>
          <td>{{ ordinary.four_field }}m³</td>
          <td>{{ ordinary.five_field }}m³</td>
        </tr>
        <tr>
          <td>
            <Tag color="red">特殊尺寸</Tag>
          </td>
          <td>每天 $0.39/m³</td>
          <td>每天 $0.39/m³</td>
          <td>每天 $0.59/m³</td>
          <td>每天 $1.3/m³</td>
          <td>每天 $1.95/m³</td>
        </tr>
        <tr>
          <td></td>
          <td>{{ special.one_field }}m³</td>
          <td>{{ special.two_field }}m³</td>
          <td>{{ special.three_field }}m³</td>
          <td>{{ special.four_field }}m³</td>
          <td>{{ special.five_field }}m³</td>
        </tr>
        </tbody>
      </table>
      
      <Table
        :columns="columns"
        :data="tabList"
        ref="table"
        :loading="loading"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        class="table"
      >
        <template slot-scope="{ row, index }" slot="type">
          <Tag v-if="row.type == 2" color="red">特殊尺寸</Tag>
          <Tag v-if="row.type == 1" color="green">普通产品</Tag>
        </template>
        <template slot-scope="{ row, index }" slot="number">
          <span v-if="row.pm == 0" class="colorgreen">- {{ row.number }}</span>
          <span v-if="row.pm == 1" class="colorred">+ {{ row.number }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="nickname">
          <span>{{ row.uid ? row.user_nickname : '游客' }}</span>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="formValidate.page"
          @on-change="pageChange"
          :page-size="formValidate.limit"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { storeWarehouseBillDetailApi } from '@/api/capital';
import { mapState } from 'vuex';
export default {
  name: 'warehouseDetails',
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      detailsData: {},
      Ids: 0,
      loading: false,
      financeTypeList: [],
      ids: '',
      warehouse_type:"",
      formValidate: {
        ids: '',
        staff_id: '',
        keyword: '',
        data: '',
        page: 1,
        limit: 10,
      },
      ordinary:{
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
      },
      special:{
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
      },
      the_total:{
        one_field:0,
        two_field:0,
        three_field:0,
        four_field:0,
        five_field:0,
      },
      total: 0,
      columns: [
        {
          title: '类型',
          key: 'type',
          slot: "type",
          minWidth: 120,
        },
        {
          title: 'sku',
          key: 'no',
          minWidth: 120,
        },
        {
          title: '0-30天',
          key: 'one_field',
          minWidth: 80,
        },
        {
          title: '31-90天',
          key: 'two_field',
          minWidth: 80,
        },
        {
          title: '91-270天',
          key: 'three_field',
          minWidth: 80,
        },
        {
          title: '271-390天',
          key: 'four_field',
          ellipsis: true,
          minWidth: 80,
        },
        {
          title: '大于390天',
          key: 'five_field',
          minWidth: 80,
        }
      ],
      tabList: [],
    };
  },
  computed: {
    ...mapState('store/layout', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 80;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  mounted() {
  },
  methods: {
    // 账单详情
    Info(row) {
      this.$refs.commission.modals = true;
      this.$refs.commission.warehouse_type = row.warehouse_type
      this.$refs.commission.getList(row.id);
    },
    searchs() {
      this.formValidate.page = 1;
      this.getList(this.ids);
    },
    // 时间
    onchangeTime(e) {
      this.formValidate.start_time = e[0];
      this.formValidate.end_time = e[1];
    },
    // 列表
    getList(id) {
      this.ids = id;
      this.formValidate.ids = id;
      this.loading = true;
      storeWarehouseBillDetailApi(this.formValidate)
        .then(async (res) => {
          let data = res.data;
          this.tabList = data.list;
          this.total = data.count;
          // 语法：for(初始化; 条件; 增量)
          for (let i = 0; i < this.tabList.length; i++) {
            this.the_total.two_field += this.tabList[i].two_field
            this.the_total.three_field += this.tabList[i].three_field
            this.the_total.four_field += this.tabList[i].four_field
            this.the_total.five_field += this.tabList[i].five_field


            if (this.tabList[i].type == 1){
              if (this.tabList[i].one_field != 0){
                this.ordinary.one_field += this.tabList[i].tj
              }else if (this.tabList[i].two_field != 0) {
                this.ordinary.two_field += this.tabList[i].tj
              }else if (this.tabList[i].three_field != 0) {
                this.ordinary.three_field += this.tabList[i].tj
              }else if (this.tabList[i].four_field != 0) {
                this.ordinary.four_field += this.tabList[i].tj
              }else if (this.tabList[i].five_field != 0) {
                this.ordinary.five_field += this.tabList[i].tj
              }
            }else if (this.tabList[i].type == 2) {
              if (this.tabList[i].one_field != 0){
                this.special.one_field += this.tabList[i].tj
              }else if (this.tabList[i].two_field != 0) {
                this.special.two_field += this.tabList[i].tj
              }else if (this.tabList[i].three_field != 0) {
                this.special.three_field += this.tabList[i].tj
              }else if (this.tabList[i].four_field != 0) {
                this.special.four_field += this.tabList[i].tj
              }else if (this.tabList[i].five_field != 0) {
                this.special.five_field += this.tabList[i].tj
              }
            }
          }
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.formValidate.page = index;
      this.getList(this.ids);
    },
    reset() {
      this.formValidate = {
        ids: this.ids,
        staff_id: '',
        keyword: '',
        data: '',
        page: 1,
        limit: 10,
      };
      this.getList(this.ids);
    },
    // 关闭按钮
    cancel() {
      this.formValidate = {
        ids: '',
        staff_id: '',
        keyword: '',
        data: '',
        page: 1,
        limit: 10,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.colorred {
  color: #ff5722;
}
.colorgreen {
  color: #009688;
}
.search {
  width: 86px;
  height: 32px;
  background: #1890ff;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.reset {
  width: 86px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.36);
  text-align: center;
  line-height: 32px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.table {
  .ivu-table-default {
    overflow-y: auto;
    max-height: 350px;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;

      &-title {
        font-size: 13px;
        color: #000000;
        margin-bottom: 12px;
      }

      &-desc {
        &-sp {
          width: 33.33%;
          color: #17233d;
          font-size: 12px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}

.price-table {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.price-table th,
.price-table td {
  padding: 8px 15px; /* 优化内间距，比原8px更舒适 */
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.price-table th {
  background-color: #f7f9fc; /* 表头背景色区分 */
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e5e9f2; /* 表头下边框加粗 */
}

.price-table tbody tr {
  transition: background-color 0.2s ease; /* 平滑过渡效果 */
}

.price-table tbody tr:hover {
  background-color: #fafbfc; /* 悬停行背景色变化 */
}

.price-table td:first-child {
  font-weight: 500; /* 第一列（类型）加粗突出 */
  color: #2c3e50;
}

.price-table td:not(:first-child) {
  color: #4a5568; /* 数值列颜色稍浅，突出类型列 */
}

/* 最后一行取消下边框，避免圆角被遮挡 */
.price-table tbody tr:last-child td {
  border-bottom: none;
}
</style>
